//
//  LoginView.swift
//  GoCash
//
//  Created by jie on 2024/4/30.
//

import SwiftUI
import Hue

struct LoginView: View {
        
    @State private var phone: String = ""
    @State private var loginButtonDisabled: Bool = true
    @State private var canGoToCodePage = false
    
    @State private var pravicy1: Bool = true
    @State private var pravicy2: Bool = true
    
    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                HStack(spacing: 0) {
                    RoundedRectangle(cornerRadius: 8).foregroundColor(Color(hex:0x8E55D7)).frame(width: 50, height: 50).padding(0)
                    Text(APP_NAME).font(Font.system(size: 22, weight: .black)).padding(.leading, 8)
                    Spacer()
                }.padding(0)
                            
                phoneInputView()
                
                Button(action: {
                    canGoToCodePage = true
                }, label: {
                    Text("Siguiente")
                        .frame(width: SCREEN_WIDHT - 36, height: 50)
                        .foregroundColor(.white)
                        .padding(0)
                }).padding(0)
                .background(!loginButtonDisabled ? MAIN_COLOR:Color(hex: 0xD2CCDA))
                .cornerRadius(15)
                .padding(.top, 50)
                .disabled(loginButtonDisabled)
                
                
                
                NavigationLink("", destination: LoginCodeView(phone: $phone), isActive: $canGoToCodePage).padding(0)
                
                
                praviceGroup()
                
                Spacer()
            }.padding(EdgeInsets(top: 150, leading: 18, bottom: 0, trailing: 18))
        }
        
        
    }
    
    func updateLoginButtonStatus() {
        if phone.count == 10 &&
            pravicy1 == true &&
            pravicy2 == true {
            loginButtonDisabled = false
        } else {
            loginButtonDisabled = true
        }
    }
    
    
    func phoneInputView() -> some View {
        HStack(spacing: 0) {
            Image(systemName: "flag").frame(width: 24, height: 16).padding(.leading, 16)
            Text("+52").font(Font.system(size: 14, weight: .medium))
            TextField("Número de teléfono", text: $phone)
                .padding()
                .foregroundColor(MAIN_COLOR)
                .font(Font.system(size: 14, weight: .medium))
                .keyboardType(.numberPad)
                .onChange(of: phone) { newValue in
                    if phone.count >= 10 {
                        phone = String(phone.prefix(10))
                        AppDelegate.closeKeyboard()
                    }
                    updateLoginButtonStatus()
                }
            Spacer()
        }.frame(height: 56).cornerRadius(15).border(Color(hex:0xEFEBF4), width: 0.5).padding(.top, 40)
    }
    
    func praviceGroup() -> some View {
        Group {
            HStack(spacing: 0) {
                Button(action: {
                    pravicy1 = !pravicy1
                    updateLoginButtonStatus()
                }, label: {
                    Image(systemName: "checkmark.square.fill").foregroundColor(pravicy1 ? MAIN_COLOR : .gray)
                }).padding(.trailing, 8)
                Text("He leído y acepto la ").font(Font.system(size: 12, weight: .regular)).foregroundColor(COLOR_A57AA5)
                Text("Política de Privacidad").font(Font.system(size: 12, weight: .bold)).foregroundColor(MAIN_COLOR).underline(color: MAIN_COLOR).onTapGesture {
                    
                }
                 Text(" y los").font(Font.system(size: 12, weight: .regular)).foregroundColor(COLOR_A57AA5)
                Spacer()
            }.padding(0)
            HStack(spacing: 0) {
                Button(action: {
                    pravicy2 = !pravicy2
                    updateLoginButtonStatus()
                }, label: {
                    Image(systemName: "checkmark.square.fill").foregroundColor(pravicy2 ? MAIN_COLOR : .gray)
                }).padding(.trailing, 8)
                Text("Términos de Servicios").font(Font.system(size: 12, weight: .bold)).foregroundColor(MAIN_COLOR).underline(color: MAIN_COLOR).onTapGesture {
                    
                }.padding(0)
                Spacer()
            }.padding(0)
        }.padding(.top, 12)
    }

}

#Preview {
    LoginView()
}
